import {
  Button,
  Modal,
  TextContainer,
  DatePicker,
  Autocomplete,
  Icon,
  TextField,
} from "@shopify/polaris";
import { useState, useCallback, useMemo } from "react";

import { CalendarMinor, ClockMajor } from "@shopify/polaris-icons";

import styled from "./DateModal.module.less";
interface Props {
  setDateModal: (DateModal: boolean) => void;
  DateModal: boolean;
}
const App = ({ setDateModal, DateModal }: Props) => {
  //   const [active, setActive] = useState(true);

  const handleChange = useCallback(() => setDateModal(!DateModal), [DateModal]);

  //date
  const [{ month, year }, setDate] = useState({ month: 7, year: 2023 });
  const [selectedDates, setSelectedDates] = useState<Date>(
    new Date("Thu Aug 10 2023 00:00:00 GMT-0500 (EST)")
  );

  const handleMonthChange = useCallback(
    (month: number, year: number) => setDate({ month, year }),
    []
  );

  const disableSpecificDates = [
    new Date("Mon Aug 12 2023 00:00:00 GMT-0500 (EST)"),
    new Date("Sat Aug 10 2023 00:00:00 GMT-0500 (EST)"),
    new Date("Thu Aug 21 2023 00:00:00 GMT-0500 (EST)"),
  ];

  //Left xuankuang
  const [value, setValue] = useState("");

  const handleDataChange = useCallback(
    (newValue: string) => setValue(newValue),
    []
  );

  //Right xuankuang
  const deselectedOptions = useMemo(
    () => [
      { value: "22:00", label: "22:00" },
      { value: "22:30", label: "22:30" },
      { value: "23:00", label: "23:00" },
      { value: "23:30", label: "23:30" },
      { value: "00:00", label: "00:00" },
    ],
    []
  );
  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
  const [inputValue, setInputValue] = useState("21:30");
  const [options, setOptions] = useState(deselectedOptions);
  const [loading, setLoading] = useState(false);

  const updateText = useCallback(
    (value: string) => {
      setInputValue(value);

      if (!loading) {
        setLoading(true);
      }

      setTimeout(() => {
        if (value === "") {
          setOptions(deselectedOptions);
          setLoading(false);
          return;
        }
        const filterRegex = new RegExp(value, "i");
        const resultOptions = deselectedOptions.filter((option) =>
          option.label.match(filterRegex)
        );
        setOptions(resultOptions);
        setLoading(false);
      }, 300);
    },
    [deselectedOptions, loading]
  );

  const updateSelection = useCallback(
    (selected: string[]) => {
      const selectedText = selected.map((selectedItem) => {
        const matchedOption = options.find((option) => {
          return option.value.match(selectedItem);
        });
        return matchedOption && matchedOption.label;
      });
      setSelectedOptions(selected);
      setInputValue(selectedText[0] || "");
    },
    [options]
  );

  const textField = (
    <Autocomplete.TextField
      onChange={updateText}
      label=""
      value={inputValue}
      prefix={<Icon source={ClockMajor} color="subdued" />}
      suffix={
        <span>
          {/* {Number(String(inputValue).slice(0, 2)) > 12
            ? Number(String(inputValue).slice(0, 2)) -
              12 +
              ":" +
              Number(String(inputValue).slice(3, 5)) +
              ":00"
            : String(inputValue).slice(0, 2) +
              ":" +
              String(inputValue).slice(2, 2) +
              ":00"} */}
          {"09:30:00"}
        </span>
      }
      placeholder="Search"
      autoComplete="off"
    />
  );

  return (
    <div style={{ height: "500px" }}>
      <Modal
        open={DateModal}
        onClose={handleChange}
        title="安排 在线商店 发布"
        primaryAction={{
          content: "安排发布",
          onAction: handleChange,
        }}
        secondaryActions={[
          {
            content: "取消",
            onAction: handleChange,
          },
        ]}
      >
        <Modal.Section>
          <div className={styled.top}>
            <div className={styled.XZK}>
              <TextField
                label=""
                value={
                  selectedDates.getFullYear().toString() +
                  "-" +
                  (selectedDates.getMonth() + 1) +
                  "-" +
                  selectedDates.getDate()
                }
                onChange={handleDataChange}
                autoComplete="off"
                prefix={<Icon source={CalendarMinor} color="subdued" />}
              />
            </div>
            <div className={styled.XZK}>
              <Autocomplete
                options={options}
                selected={selectedOptions}
                onSelect={updateSelection}
                loading={loading}
                textField={textField}
              />
            </div>
          </div>
          <DatePicker
            month={month}
            year={year}
            onChange={({ start }) => setSelectedDates(start)}
            onMonthChange={handleMonthChange}
            selected={selectedDates}
            // disableDatesBefore={
            //   new Date("Sat Aug 02 2023 00:00:00 GMT-0500 (EST)")
            // }
            // disableDatesAfter={
            //   new Date("Sun Aug 17 2023 00:00:00 GMT-0500 (EST)")
            // }
            disableSpecificDates={disableSpecificDates}
            multiMonth
          />
        </Modal.Section>
      </Modal>
    </div>
  );
};

export default App;
